<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <video autoplay playsinline id="player"></video>
</div>
<script src="../static/adapter.js"></script>
<script src="../utils/utils.js"></script>
<script>
  'use strict'

  var $videoPlay = document.querySelector('video#player')

  /**
   * 获取到流， 直接赋值给 video
   *
   * @param stream
   * @returns {Promise<MediaDeviceInfo[]>}
   */
  function gotMediaStream (stream) {
    $videoPlay.srcObject = stream
  }

  /**
   * 获取设备信息以及权限
   * 切换浏览器或者重新打开，都需要重新调用 || 重新获取。
   */
  function start () {
    const getUserMedia = testUserMedia()
    if (getUserMedia) {
      var constraints = {
        video: {
          width: 320,
          height: 240,
        },
        audio: false,
      }

      getUserMedia(constraints)
        .then(gotMediaStream)
    }
  }

  start ()
</script>
</body>
</html>
